import React, { Component, Suspense } from 'react'
import { PageHeader, Spin, Affix } from 'antd';

// 导入样式文件
import '../assets/css/layout.scss';
// 导入路由
import { HashRouter as Router, NavLink } from 'react-router-dom';
// 导入路由
import routes from '../router/routes';
import RouterView from '../router/RouterView';


export default class Layout extends Component {
    render() {

        return (
            <Router>
                <div className="layout-container">
                    <Affix>
                        <div>
                            {/* 页面头部 */}
                            <div className="header">
                                <PageHeader
                                    className="site-page-header"
                                    title="优音乐"
                                />
                                <button className="btn-download">下载App</button>
                            </div>
                            {/* 导航栏 */}
                            <div className="navbar">
                                <NavLink to="/recommend">推荐</NavLink>
                                <NavLink to="/hot">热歌</NavLink>
                                <NavLink to="/search">搜索</NavLink>
                            </div>
                        </div>
                    </Affix>
                    {/*  路由出口 */}
                    <Suspense fallback={<div style={{ textAlign: 'center' }}><Spin size="large" /></div>}>
                        <RouterView routes={routes} />
                    </Suspense>
                </div>
            </Router>
        )
    }

}
